<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
            position: relative;
            width: 300px;
            height: 60px;
        }
        ul li {
            width: 300px;
            height: 60px;
            background-image: url(./icon_star.gif);
            background-repeat: repeat-x;
            position: absolute;
            top: 0;
            left: 0;
        }
        ul li:first-child {
            background-position: 0 0 ;
        }
        ul li:last-child {
            z-index: 1000;/*考虑下层级*/
            background-position: 0 -60px;
        }
    </style>
</head>
<body>


    <!-- <ul>
        <li></li>
        <li style="width: 60px;"></li>
    </ul> -->



    <script>
        // 编写函数 通过传参改变(星座的运势)li标签的宽度
        // 定义变量 记录宽度
        var w = 150;
        // var w = prompt("请输入数值,范围: 0-300");

        // 定义函数 处理相关逻辑(改变li标签宽度的逻辑)
        function changeWidth(width) {
            // 定义变量 记录html字符串
            var str = "";
                str += '<ul>'
                str += '    <li></li>'
                str += '    <li style="width: '+width+'px;"></li>'
                str += '</ul>'
            document.write(str);
        }

        // 调用函数,查看星星的效果
        changeWidth(w);

    </script>
</body>
</html>